<template>
    <div class="aside">
        <div v-for="tag in vtags" :key="tag.name" :class="['aside-tag', active === tag.name ? 'aside-tag-active' : '']" @click="activeTag(tag.name)">
            <div class="name"><i class="el-icon-s-home" />  {{tag.name}}</div>
            <div class="description">{{tag.description}}</div>
        </div>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  export default {
    name: "tags",
    computed: {
      ...mapGetters([
        'vtags',
        'active'
      ])
    },
    methods: {
      activeTag(tagName) {
        this.$store.dispatch('active', tagName);
      }
    }
  }
</script>

<style scoped>
    .aside {
        width: 100%;
        height: 100%;
    }

    .aside-tag {
        cursor: pointer;
        padding: 0 12px;
        width: 276px;
        height: 60px;
        background-color: #263850;
    }

    .aside-tag:hover {
        background-color: #1a222d;
    }

    .aside-tag-active {
        background-color: #1a222d;
    }

    .aside-tag .name {
        height: 40px;
        width: 276px;
        font-size: 14px;
        color: #A1AEC4;
        line-height: 40px;
        text-overflow:ellipsis;
        white-space: nowrap;
        overflow: hidden;
        word-break: break-all;
    }

    .aside-tag .description {
        height: 12px;
        width: 276px;
        font-size: 10px;
        color: #64758E;
        line-height: 12px;
        text-overflow:ellipsis;
        white-space: nowrap;
        overflow: hidden;
        word-break: break-all;
    }
</style>